import React, {useState} from 'react'
import {NavLink,useNavigate} from 'react-router-dom'
import api from "../../api";
import './index.css'


export default function Register (){
    const [account,setAccount]=useState("") //账号
    const [code,setCode]=useState("")   //验证码
    const [pwd,setPwd]=useState("") //密码
    const [waitTime,setWaitTime]=useState(0)
    const navigate=useNavigate()

    //用于注册账号
    async function register(e){
        console.log(account,code,pwd)
        e.preventDefault()
        navigate('/login')
        let data=await api.registerApi({
            account,
            code,
            password:pwd
        })
        console.log(data.message,data.status)
    }
    //用于更新账号、验证码和密码输入
    function update(e,func){
        func(e.target.value)
    }
    //发送验证码
    async function handleSendCode(){
        wait()
        let data=await api.sendMimeMailApi({
            account
        })
        if(data.status===200)
        {
            console.log('发送成功拉')
        }else{
            console.log('发送失败拉',data.message)
        }
    }
    //验证码等待时间
    function wait(){
        let time=30
        setWaitTime(time)
        const timer=setInterval(()=>{
            time=time-1
            setWaitTime(time)
            if(time===0){
                clearInterval(timer)
            }
        },1000)
    }

    return (
        <div className={'panel panel-default register'}>
            <div className={'panel-heading'}>
                <div>成为组织者</div>
                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                <NavLink to={'/login'}>&lt;&nbsp;返回登录</NavLink>
            </div>
            <div className={'panel-body'}>
                <form action="#">
                    <div className={'form-group login'}>
                        <input type="email" className={'form-control login'} placeholder={'请输入邮箱'}
                        onChange={(e)=>{update(e,setAccount)}}/>
                    </div>
                    <div className={'form-group login'}>
                        <div className={'input-group'}>
                            <input type="text" className={'form-control login'} placeholder={'请输入验证码'}
                            onChange={(e)=>{update(e,setCode)}}/>
                            <span className={'input-group-btn login'}>
                                {
                                    waitTime===0?
                                    <button className={'btn btn-default'} type={"button"}
                                                         onClick={handleSendCode}>获取验证码</button>:
                                        <button disabled={false} className={'btn btn-default'} type={"button"}
                                                style={{backgroundColor:'lightgray'}}>{waitTime}s后重新获取</button>
                                }
                            </span>
                        </div>
                    </div>
                    <div className={'form-group login'}>
                        <input type={'password'} className={'form-control login'} placeholder={'请输入密码'}
                        onChange={(e)=>{update(e,setPwd)}}/>
                    </div>
                    <div className={'checkbox'}>
                        <label>
                            <input type="checkbox"/>登录即代表同意协议
                        </label>
                    </div>
                    <button type={'submit'} className={'btn btn-default register'}
                    onClick={register}>注册</button>
                </form>
            </div>
        </div>
    )
}